@import 'colors.less';

@colors: @green, @orange;
@names: primary, secondary;

.btn(@bg: @dark, @text: white, @height: 40px, @padding: 12px) {

  display: inline-block;
  position: relative;

  height: @height;
  line-height: @height;

  padding: 0 @padding 0;

  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;

  border: none;
  border-radius: 6px;
  font-size: 14px;

  background: @bg;
  color: @text;

  &:hover {
    border: none;
    box-shadow: inset 0 0 0 250px rgba(0, 0, 0, 0.05);
  }
}

.generate(@colors, @names, btn);

.generate(@a, @b, @gen, @i: length(@a)) when (@i > 0) {
  @color: extract(@a, @i);
  @name:  extract(@b, @i);

  .@{gen}--@{name} {
    .btn(@color);
  }

  .generate(@a, @b, @gen, (@i - 1));
}
